<template>
  <div class="Home4">
    <div class="auto auto_1200">
      <div class="Htitle">
        <h2>公益援助</h2>
        <p><i></i><b>DONATIONS</b><i></i></p>
        <span>伸出援助手，让爱回家！</span>
      </div>
      <div class="Info">
        <dl class="dl_1">
          <dt>
            <a href="/Content/List/44199d9c76b06d7a">查看更多</a>
            乐捐项目<b> / Donation project</b>
          </dt>
          <dd>
            <ul class="ul">
              <li style="display: list-item">
                <img
                  src="http://www.tianyaxunqin.com/UploadFiles/image/20171026/8bc43f428c2881bb.png"
                />
                <figure>
                  <span><b>期望金额</b>10.00万</span>
                  <span><b>已筹金额</b>3551.12</span>
                  <span class="no"><b>捐款人数</b>60</span>
                </figure>
                <div class="donation">
                  <p>
                    <i></i>
                    <span style="width: 4%"></span>
                    <i class="i_end"></i>
                  </p>
                  <b>捐赠完成：3.55%</b>
                </div>
                <div class="txt">
                  <a href="/Content/Info/f9e874c5d0edc7db"
                    ><b>项目名称：</b>天涯寻亲全国直播行</a
                  >
                  <p>
                    <b>项目说明：</b
                    >天涯寻亲协会结合互联网发展，针对全国失亲家庭，提出....
                  </p>
                </div>
                <a href="/Content/Info/f9e874c5d0edc7db" class="more"
                  >立即捐助</a
                >
                <div class="share">
                  <div class="bshare-custom icon-medium">
                    <div class="bsPromo bsPromo2"></div>
                    <div class="bsPromo bsPromo2"></div>
                    <a
                      title="更多平台"
                      class="bshare-more bshare-more-icon more-style-addthis"
                    ></a>
                  </div>

                </div>
              </li>
              <li style="display: none">
                <img
                  src="http://www.tianyaxunqin.com/UploadFiles/image/20171026/b7d43eebe5d58a0b.png"
                />
                <figure>
                  <span><b>期望金额</b>10.00万</span>
                  <span><b>已筹金额</b>1757.22</span>
                  <span class="no"><b>捐款人数</b>35</span>
                </figure>
                <div class="donation">
                  <p>
                    <i></i>
                    <span style="width: 2%"></span>
                    <i class="i_end"></i>
                  </p>
                  <b>捐赠完成：1.76%</b>
                </div>
                <div class="txt">
                  <a href="/Content/Info/81d0092f92e6e1ef"
                    ><b>项目名称：</b>天涯寻亲网“让爱回家”项目</a
                  >
                  <p>
                    <b>项目说明：</b
                    >天涯寻亲协会在开展社会工作服务的同时，发现很多老人....
                  </p>
                </div>
                <a href="/Content/Info/81d0092f92e6e1ef" class="more"
                  >立即捐助</a
                >
                <div class="share">
                  <div class="bshare-custom icon-medium">
                    <div class="bsPromo bsPromo2"></div>
                    <div class="bsPromo bsPromo2"></div>
                    <a
                      title="更多平台"
                      class="bshare-more bshare-more-icon more-style-addthis"
                    ></a>
                  </div>
                </div>
              </li>
            </ul>
            <div class="hd">
              <a class="prev prevStop"></a>
              <ul>
                <li class="on">1</li>
                <li class="">2</li>
              </ul>
              <a class="next"></a>
            </div>
          </dd>
        </dl>
        <dl class="dl_2">
          <dt>
            <a href="/Content/List/fb1e2b41913f5b6f">查看更多</a>
            个人公益捐赠<b> / Personal donation</b>
          </dt>
          <dd>
            <article>
              <p align="center">
                <img
                  src="http://www.tianyaxunqin.com/lcstyx201705317659/UploadFiles/image/20171124/logo.png"
                  alt=""
                />
              </p>
              <p align="center" style="text-align: left">
                <span style="white-space: normal"
                  >天涯寻亲志愿者协会注册成立于2014年9月26日，是经民政部门审批依法注册登记的公益社会组织。天涯寻亲协会的宗旨：让爱回家，万家团圆！根据近年来人口买卖犯罪呈多元化发展的趋势以及人口老龄化严重的社会现状，天涯寻亲协会整合多方资源为失亲家庭、寻亲寻家人员、走失老人、失踪儿童、流浪乞讨老人儿童等特殊群体提供公益服务。</span
                >
              </p>
            </article>
            <a href="/Content/List/fb1e2b41913f5b6f" class="more">立即捐助</a>
            <div class="share">
              <div class="bshare-custom icon-medium">
                <div class="bsPromo bsPromo2"></div>
                <div class="bsPromo bsPromo2"></div>
                <a
                  title="更多平台"
                  class="bshare-more bshare-more-icon more-style-addthis"
                ></a>
              </div>
              
            </div>
          </dd>
        </dl>
        <dl class="dl_3">
          <dt>
            <a href="/Content/List/484e4e73dcd17362">查看更多</a>
            荣誉榜<b> / Honor list</b>
          </dt>
          <dd>
            <div
              class="tempWrap"
              style="overflow: hidden; position: relative; height: 392px"
            >
              <ul
                class="ul"
                style="
                  height: 1064px;
                  position: relative;
                  padding: 0px;
                  margin: 0px;
                  top: -56px;
                "
              >
                <li class="clone" style="height: 38px">
                  <a>2021112320.... 在 2021-11-23 捐赠了10.00元</a>
                </li>
                <li style="height: 38px">
                  <a>185*****62.... 在 2022-02-22 捐赠了100.00元</a>
                </li>
                <li style="height: 38px">
                  <a>139*****12.... 在 2022-01-04 捐赠了100.00元</a>
                </li>
                <li style="height: 38px">
                  <a>153*****35.... 在 2021-12-23 捐赠了100.00元</a>
                </li>
                <li style="height: 38px">
                  <a>2021121515.... 在 2021-12-15 捐赠了100.00元</a>
                </li>
                <li style="height: 38px">
                  <a>137*****11.... 在 2021-12-11 捐赠了10.00元</a>
                </li>
                <li style="height: 38px">
                  <a>180*****31.... 在 2021-12-09 捐赠了100.00元</a>
                </li>
                <li style="height: 38px">
                  <a>176*****17.... 在 2021-12-07 捐赠了10.00元</a>
                </li>
                <li style="height: 38px">
                  <a>2021120621.... 在 2021-12-06 捐赠了10.00元</a>
                </li>
                <li style="height: 38px">
                  <a>158*****52.... 在 2021-12-06 捐赠了100.00元</a>
                </li>
                <li style="height: 38px">
                  <a>139*****12.... 在 2021-12-01 捐赠了100.00元</a>
                </li>
                <li style="height: 38px">
                  <a>2021112320.... 在 2021-11-23 捐赠了10.00元</a>
                </li>

                <li class="clone" style="height: 38px">
                  <a>185*****62.... 在 2022-02-22 捐赠了100.00元</a>
                </li>
                <li class="clone" style="height: 38px">
                  <a>139*****12.... 在 2022-01-04 捐赠了100.00元</a>
                </li>
                <li class="clone" style="height: 38px">
                  <a>153*****35.... 在 2021-12-23 捐赠了100.00元</a>
                </li>
                <li class="clone" style="height: 38px">
                  <a>2021121515.... 在 2021-12-15 捐赠了100.00元</a>
                </li>
                <li class="clone" style="height: 38px">
                  <a>137*****11.... 在 2021-12-11 捐赠了10.00元</a>
                </li>
                <li class="clone" style="height: 38px">
                  <a>180*****31.... 在 2021-12-09 捐赠了100.00元</a>
                </li>
                <li class="clone" style="height: 38px">
                  <a>176*****17.... 在 2021-12-07 捐赠了10.00元</a>
                </li>
              </ul>
            </div>
          </dd>
        </dl>
        <div class="clear"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Donation",

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.Home4 {
  background: url(./images/Home4_bg.jpg) center top;
  width: 100%;
  background-size: auto 100%;
  padding-bottom: 100px;
}
.auto {
  margin: 0 auto;
}
.auto_1200 {
  width: 1240px;
}
.Htitle {
  text-align: center;
  padding: 50px 0;
}
h2 {
  margin: 0;
  color: #333;
  font-size: 30px;
  font-weight: normal;
}
p {
  margin: 0;
}
i {
  display: inline-block;
  vertical-align: middle;
  height: 1px;
  width: 193px;
  background: #e1e1e1;
}
p b {
  display: inline-block;
  font-family: Arial;
  color: #cccccc;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: normal;
  margin: 10px 25px;
}
span {
  display: block;
  color: #666;
  font-size: 16px;
}

</style>